<div style="display: none">
  <div z-confirm="deleteVmInstance" z-options="optionsDeleteVmInstance"></div>
  <div z-confirm="expungeVmInstance" z-options="optionsExpungeVmInstance"></div>
  <div z-migrate-vm-instance="migrateVm" z-options="optionsMigrateVm"></div>
  <div z-vm-attach-volume="attachVolume" z-options="optionsAttachVolume"></div>
  <div z-vm-detach-volume="detachVolume" z-options="optionsDetachVolume"></div>
  <div z-vm-attach-l3-network="attachL3Network" z-options="optionsAttachL3Network"></div>
  <div z-vm-detach-l3-network="detachL3Network" z-options="optionsDetachL3Network"></div>
  <div z-change-instance-offering="changeInstanceOffering" z-options="optionsChangeInstanceOffering"></div>
</div>

<div class="z-pane">
  <ol class="breadcrumb">
    <li><a href="/#/vmInstance">{{"vm.details.VM INSTANCE" | translate}}</a></li>
    <li class="active"><a href>{{model.current.name}}</a></li>
  </ol>

  <h1>{{model.current.name}}</h1>

  <div class="z-pane-toolbar" ng-show="funcToolbarShow()">
    <div class="btn-group-sm">
      <button type="button" class="btn btn-default btn-sm z-ribbon-button" ng-click="funcRefresh()">
        <i class="fa fa-refresh"></i>
      </button>
      <div class="btn-group">
        <button type="button" class="btn btn-primary btn-sm dropdown-toggle" data-toggle="dropdown">
          {{"vm.details.Action" | translate}} <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" role="menu">
          <li><a href ng-click="action.start()" ng-show="action.isActionShow('start')">{{"vm.details.Start" | translate}}</a></li>
          <li><a href ng-click="action.stop()" ng-show="action.isActionShow('stop')">{{"vm.details.Stop" | translate}}</a></li>
          <li><a href ng-click="action.reboot()" ng-show="action.isActionShow('reboot')">{{"vm.details.Reboot" | translate}}</a></li>
          <li><a href ng-click="action.migrate()" ng-show="action.isActionShow('migrate')">{{"vm.details.Migrate" | translate}}</a></li>
          <li><a href ng-click="action.console()" ng-show="action.isActionShow('console')">{{"vm.details.Console" | translate}}</a></li>
          <li><a href ng-click="action.attachVolume()" ng-show="action.isActionShow('attachVolume')">{{"vm.details.Attach Volume" | translate}}</a></li>
          <li><a href ng-click="action.detachVolume()" ng-show="action.isActionShow('detachVolume')">{{"vm.details.Detach Volume" | translate}}</a></li>
          <li><a href ng-click="action.attachL3Network()" ng-show="action.isActionShow('attachL3Network')">{{"vm.details.Attach L3 Network" | translate}}</a></li>
          <li><a href ng-click="action.detachL3Network()" ng-show="action.isActionShow('detachL3Network')">{{"vm.details.Detach L3 Network" | translate}}</a></li>
          <li><a href ng-click="action.changeInstanceOffering()" ng-show="action.isActionShow('changeInstanceOffering')">{{"vm.details.Change Instance Offering" | translate}}</a></li>
          <li><a href ng-click="action.recover()" ng-show="action.isActionShow('recoverVm')">{{"vm.vm.recover" | translate}}</a></li>
          <li class="divider"></li>
            <li><a href style="color:red" ng-click="funcDeleteVmInstance(deleteVmInstance)"  ng-show="action.isActionShow('delete')">{{"vm.vm.Delete" | translate}}</a></li>
          <li><a href style="color:red" ng-click="funcExpungeVmInstance(expungeVmInstance)" ng-show="action.isActionShow('expungeVm')">{{"vm.vm.Expunge" | translate}}</a></li>
        </ul>
      </div>
    </div>
  </div>

  <ul class="nav nav-pills">
    <li class="active"><a data-target="#info" data-toggle="pill" href>{{"vm.details.Info" | translate}}</a></li>
    <li><a data-target="#nic" data-toggle="pill" href>{{"vm.details.Nic" | translate}}</a></li>
    <li><a data-target="#volume" data-toggle="pill" href>{{"vm.details.Volume" | translate}}</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="info">
      <tags-input ng-model="optionsTag.tags" display-property="tag" min-length="1"
                  on-tag-added="optionsTag.createTag($tag)" on-tag-removed="optionsTag.deleteTag($tag)"
                  add-on-comma="false" replace-spaces-with-dashes="false" ng-show="optionsTag.isShow()"></tags-input>

      <div class="panel panel-default" z-panel-header-in>
        <div class="panel-heading">
          <a class="accordion-toggle" data-target="#infoDetails" data-toggle="collapse" href>
            <i class="z-collapse fa fa-chevron-down"></i>
            <span>&nbsp; {{"vm.details.DETAILS" | translate}}</span>
          </a>
        </div>

        <div id="infoDetails" class="panel-collapse collapse in">
          <div class="panel-body">
            <table class="table z-table-borderless">
              <tr>
                <td><span class="z-label">{{"vm.details.DESCRIPTION" | translate}}</span></td>
                <td><span class="z-description">{{model.current.description}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.STATE" | translate}}</span></td>
                <td><span class="{{model.current.stateLabel()}}">{{model.current.state}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.HYPERVISOR" | translate}}</span></td>
                <td><span>{{model.current.hypervisorType}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.UUID" | translate}}</span></td>
                <td><span>{{model.current.uuid}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.CPU NUM" | translate}}</span></td>
                <td><span>{{model.current.cpuNum}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.MEMORY SIZE" | translate}}</span></td>
                <td><span>{{model.current.memorySize | size}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.HOST NAME" | translate}}</span></td>
                <td><span>{{hostname}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.INSTANCE OFFERING UUID" | translate}}</span></td>
                <td><a href="/#/instanceOffering/{{model.current.instanceOfferingUuid}}">{{model.current.instanceOfferingUuid}}</a></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.DEFAULT L3 NETWORK UUID" | translate}}</span></td>
                <td><a href="/#/l3Network/{{model.current.defaultL3NetworkUuid}}">{{model.current.defaultL3NetworkUuid}}</a></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.IMAGE UUID" | translate}}</span></td>
                <td><a href="/#/image/{{model.current.imageUuid}}">{{model.current.imageUuid}}</a></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.HOST UUID" | translate}}</span></td>
                <td><a href="/#/host/{{model.current.hostUuid}}">{{model.current.hostUuid}}</a></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.LAST HOST UUID" | translate}}</span></td>
                <td><a href="/#/host/{{model.current.lastHostUuid}}">{{model.current.lastHostUuid}}</a></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.CLUSTER UUID" | translate}}</span></td>
                <td><a href="/#/cluster/{{model.current.clusterUuid}}">{{model.current.clusterUuid}}</a></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.ZONE UUID" | translate}}</span></td>
                <td><a href="/#/zone/{{model.current.zoneUuid}}">{{model.current.zoneUuid}}</a></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.CREATED DATE" | translate}}</span></td>
                <td><span>{{model.current.createDate}}</span></td>
              </tr>
              <tr>
                <td><span class="z-label">{{"vm.details.LAST UPDATED DATE" | translate}}</span></td>
                <td><span>{{model.current.lastOpDate}}</span></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>

    <div class="tab-pane" id="nic">
      <div kendo-grid="nicGrid" k-options="optionsNicGrid" class="z-flat-table"></div>
    </div>

    <div class="tab-pane" id="volume">
      <div kendo-grid="volumeGrid" k-options="optionsVolumeGrid" class="z-flat-table"></div>
    </div>
  </div>
</div>
